/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-19 16:25:33
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-18 13:57:08
 * @description: 描述信息
 * @author: chenbinfa
 */
/**
 * 头部
 * @author fage
 * @Date: 2022-4-8
 */

import styled from "styled-components";
import _ from "lodash";
import { AppstoreOutlined, MailOutlined, SettingOutlined, LinkOutlined } from "@ant-design/icons";
import { NavLink, useNavigate, use, useLocation } from "react-router-dom";
import { Menu } from "antd";
import React, { useRef, useState, useEffect } from "react";
import {
	HomeOutlined,
	UserOutlined,
	DownOutlined,
	DeleteOutlined,
	LoginOutlined,
	ApartmentOutlined,
	AppstoreAddOutlined,
	SwapOutlined,
	DatabaseOutlined,
	WalletOutlined
} from "@ant-design/icons";

function Header({ className }) {
	const navigate = useNavigate();
	let location = useLocation();
	const [showDropMenu, setShowDropMenu] = useState(0);
	const [showMenuBox, setShowMenuBox] = useState(false);
	const [selKey, setSelKey] = useState("/");
	const onClick = ({ key, keyPath, domEvent }) => {
		// console.log("click ", item, key, keyPath, domEvent);
		if (key) {
			navigate(key);
		}
	};

	useEffect(() => {
		// console.log(location);
		// let p = location.pathname;
		// if (p.indexOf("/block/") == 0) {
		// 	p = "/block/";
		// } else if (p.indexOf("/transfer/") == 0) {
		// 	p = "/transfer/";
		// } else if (p.indexOf("/miner/") == 0) {
		// 	p = "/miner/";
		// } else if (p.indexOf("/account/") == 0) {
		// 	p = "/account/";
		// } else if (p.indexOf("/statistics/") == 0) {
		// 	p = "/statistics/";
		// }
		// setSelKey(p);
	}, [location]);

	const onDropMenuClick = i => {
		if (showDropMenu == i) {
			setShowDropMenu(0);
		} else {
			setShowDropMenu(i);
		}
	};

	return (
		<div className={className}>
			<div className="abs-header">
				<div className="header-content">
					<span className="logo-txt">
						<NavLink className="logo-link" to="/">
							<img width={180} src={process.env.PUBLIC_URL + "/img/logo.png"} />
						</NavLink>
					</span>
					<div className="menu">
						<div className="menu-item">
							<NavLink to="/">Home</NavLink>
						</div>
						<div className="menu-item">
							<span>
								Blockchain&nbsp;&nbsp;
								<DownOutlined className="icon" />
							</span>
							<div className="dropdown">
								<NavLink to="/block">Blocks</NavLink>
								<NavLink to="/">Transfers</NavLink>
								<NavLink to="/">Extrinsics</NavLink>
								<NavLink to="/">Events</NavLink>
								<NavLink to="/">Accounts</NavLink>
							</div>
						</div>
						<div className="menu-item">
							<span>
								Miners&nbsp;&nbsp;
								<DownOutlined className="icon" />
							</span>
							<div className="dropdown">
								<NavLink to="/">Storage Miners</NavLink>
								<NavLink to="/">Consensus Miners</NavLink>
								<NavLink to="/">Nominators</NavLink>
							</div>
						</div>
						<div className="menu-item">
							<NavLink to="/">Storage</NavLink>
						</div>
						<div className="menu-item">
							<NavLink to="/">RPC Node</NavLink>
						</div>
					</div>
					<div className="m-menu" onClick={() => setShowMenuBox(!showMenuBox)}>
						{showMenuBox ? (
							<img width={34} height={34} src={process.env.PUBLIC_URL + "/img/menu-close.png"} />
						) : (
							<img width={34} height={34} src={process.env.PUBLIC_URL + "/img/menu.png"} />
						)}
					</div>
				</div>
			</div>
			<div className={showMenuBox ? "m-menu-center" : "m-menu-center1"}>
				<div className="menu-item">
					<NavLink to="/">Home</NavLink>
				</div>
				<div className="menu-item">
					<span onClick={() => onDropMenuClick(2)}>
						Blockchain&nbsp;&nbsp;
						<DownOutlined className={showDropMenu == 2 ? "icon t180" : "icon"} />
					</span>
					<div className={showDropMenu == 2 ? "dropdown dropdown2" : "dropdown"}>
						<NavLink to="/block">Blocks</NavLink>
						<NavLink to="/">Transfers</NavLink>
						<NavLink to="/">Extrinsics</NavLink>
						<NavLink to="/">Events</NavLink>
						<NavLink to="/">Accounts</NavLink>
					</div>
				</div>
				<div className="menu-item">
					<span onClick={() => onDropMenuClick(3)}>
						Miners&nbsp;&nbsp;
						<DownOutlined className={showDropMenu == 3 ? "icon t180" : "icon"} />
					</span>
					<div className={showDropMenu == 3 ? "dropdown dropdown2" : "dropdown"}>
						<NavLink to="/">Storage Miners</NavLink>
						<NavLink to="/">Consensus Miners</NavLink>
						<NavLink to="/">Nominators</NavLink>
					</div>
				</div>
				<div className="menu-item">
					<NavLink to="/">Storage</NavLink>
				</div>
				<div className="menu-item">
					<NavLink to="/">RPC Node</NavLink>
				</div>
			</div>
		</div>
	);
}

export default styled(Header)`
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 60px;
	background-color: rgba(0, 87, 255, 1);
	@media screen and (max-width: 1200px) and (min-width: 500px) {
		.menu {
			display: none !important;
		}
		.m-menu {
			display: flex !important;
		}
		.abs-header {
			max-width: 1060px;
			padding: 0 20px;
			margin: 0 auto;
		}
	}
	@media screen and (max-width: 500px) {
		.menu {
			display: none !important;
		}
		.m-menu {
			display: flex !important;
		}
		.abs-header {
			max-width: 100%;
			width: 100%;
			padding: 0px;
		}
	}
	a {
		text-decoration: none;
	}
	.t180 {
		transform: rotate(180deg);
	}
	.t90 {
		transform: rotate(90deg);
	}
	.abs-header {
		display: block;
		width: 100%;
		height: 60px;
		background-color: rgba(0, 87, 255, 1);
		color: #fff;
		.header-content {
			max-width: 1760px;
			padding: 0 20px;
			display: flex;
			margin: 0 auto;
			flex-direction: row;
			justify-content: space-between;
			.logo-txt {
				width: 190px;
				.logo-link {
					width: 100%;
					height: 60px;
					display: flex;
					align-items: center;
				}
			}
			.menu {
				width: 780px;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin-right: calc(50% - 390px);
				.menu-item {
					width: 156px;
					height: 60px;
					line-height: 60px;
					font-size: 14px;
					color: #f2f2f2;
					cursor: pointer;
					position: relative;
					top: 0;
					text-align: center;
					.icon {
						font-size: 12px;
						color: #fff;
						transition: all 0.3s;
					}
					a {
						font-size: 14px;
						color: #f2f2f2;
						display: block;
						text-align: center;
					}
					.dropdown {
						position: absolute;
						left: 0;
						top: 60px;
						display: flex;
						width: 100%;
						max-height: 0;
						overflow: hidden;
						transition: all 0.5s;
						line-height: 60px;
						background-color: rgba(0, 87, 255, 1);
						flex-direction: column;
						a {
							border-bottom: 1px solid rgba(16, 73, 183, 1);
						}
					}
				}
				.menu-item:hover {
					.dropdown {
						max-height: 1000px;
					}
					.icon {
						transform: rotate(180deg);
					}
				}
			}
			.m-menu {
				display: none;
				width: 45px;
				height: 60px;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
		}
	}
	.m-menu-center {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(0, 87, 255, 1);
		.menu-item {
			width: 100%;
			line-height: 60px;
			font-size: 14px;
			color: #f2f2f2;
			cursor: pointer;
			text-align: center;
			.icon {
				font-size: 12px;
				color: #fff;
				transition: all 0.3s;
			}
			a {
				font-size: 14px;
				color: #f2f2f2;
				display: block;
				text-align: center;
			}
			.dropdown {
				top: 60px;
				display: flex;
				width: 100%;
				max-height: 0;
				overflow: hidden;
				transition: all 0.5s;
				line-height: 60px;
				background-color: rgba(0, 87, 255, 1);
				flex-direction: column;
				a {
					border-bottom: 1px solid rgba(16, 73, 183, 1);
				}
			}
			.dropdown2 {
				max-height: 1000px;
			}
		}
	}
	.m-menu-center1 {
		display: none;
	}
`;
